<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表页-正品低价、品质保障、配送及时、轻松购物！</title>
    <!-- 网站说明-->
    <meta name="description" content="品优购-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。">
    <meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜">
    <link rel="stylesheet" href="../css/base.css">
    <!-- 模块化引入公共样式文件-->
    <link rel="stylesheet" href="../css/common.css">
    <!-- 模块化引入list样式文件-->
    <link rel="stylesheet" href="../css/list.css">
    <!--引入favicon图-->
    <link rel="shortcut icon" href="favicon.ico" >

</head>
<body>
<!--快捷导航模块开始-->
<div class="shortcut">
    <!-- 版心-->
    <div class="w">
        <!-- 快捷导航左盒子 -->
        <div class="fl">
            <ul>
                <li>品优购欢迎您！</li>&nbsp;
                <li>
                    <a href="">请登录</a> &nbsp;
                    <a  class="style_red" href="">免费注册</a>
                </li>
            </ul>
        </div>
        <!--快捷导航右盒子-->
        <div class="fr">
            <ul>
                <li><a href="">我的订单</a></li>
                <li></li>
                <li><a class="arrow-icon" href="">我的品优购</a></li>
                <li></li>
                <li><a href="">品优购会员</a></li>
                <li></li>
                <li><a href="">企业采购</a></li>
                <li></li>
                <li><a class="arrow-icon" href="">关注品优购</a></li>
                <li></li>
                <li><a class="arrow-icon" href="">客户服务</a></li>
                <li></li>
                <li><a class="arrow-icon" href="">网址导航</a></li>
            </ul>
        </div>
    </div>
</div>
<!--快捷导航模块结束-->

<!--header头部模块开始-->
<header class="header w">
    <!--品优购logo标志模块-->
    <div class="logo">
        <h1>
            <a title="品优购商城" href="index.html">品优购首页</a>
        </h1>
    </div>
    <div class="sk">
        <img src="../images/miaosha.png" alt="">
    </div>
    <!-- search搜索模块-->
    <div class="search">
        <input class="input_serch" type="search" placeholder="语言开发">
        <input class="input_btn" type="button" value="搜索">
    </div>
    <!--  hotwords热词模块-->
    <div class="hotwords">

        <a href="">优惠购首发</a>
        <a href="">亿元优惠</a>
        <a href="">9.9元团购</a>
        <a href="">每满99减30</a>
        <a href="">办公用品</a>
        <a href="">电脑</a>
        <a href="">通信</a>

    </div>
    <!-- shopcar购物车模块-->
    <div class="shopcar">
        <span>我的购物车</span>
        <div class="count">80</div>
    </div>
</header>
<!--header头部模块结束-->
<!--nav导航模块开始-->
<!--nav导航模块大盒子-->
<nav class="nav">
    <div class="w">
        <!--左侧秒杀盒子-->
        <div class="sk_list">
                <ul>
                    <li><a href="">品牌秒杀</a></li>
                    <li><a href="">即将售罄</a></li>
                    <li><a href="">超值低价</a></li>
                </ul>
            </div>
        </div>
        <!--相关分类盒子-->
        <div class="navitems">
            <a href="">女装</a>
            <a href="">女鞋</a>
            <a href="">男装</a>
            <a href="">男鞋</a>
            <a href="">母婴童装</a>
            <a href="">食品</a>
            <a href="">智能数码</a>
            <a href="">运动户外</a>
            <a class="navitems-more" href="">更多分类</a>
        </div>
    </div>
</nav>
<!--nav导航模块结束-->

<!--列表页独有模块开始-->
<div class="sk_container w">
    <!--列表页独有模块头部-->
    <div class="sk_hd"></div>
    <!--列表页独有模块内容-->
    <div class="sk_bd">
        <ul class="clearfix">
            <li>
                <img src="../images/phone_1.png" alt="">
                <p>Apple苹果iPhone 6s Plus(A1699) 32G 金色 移动联通电信4G手机</p>
                <h2>￥6008</h2>
                <h4>￥6998</h4>
                <div>
                    已售87%
                    <div class="progressbar">
                        <div class="progressbar-s"></div>
                    </div>
                    剩余<span class="sp_29">29</span>件
                </div>
                <a href="">立即抢购</a>
            </li>
            <li>
                <img src="../images/phone_1.png" alt="">
                <p>Apple苹果iPhone 6s Plus(A1699) 32G 金色 移动联通电信4G手机</p>
                <h2>￥6008</h2>
                <h4>￥6998</h4>
                <div>
                    已售87%
                    <div class="progressbar">
                        <div class="progressbar-s"></div>
                    </div>
                    剩余<span class="sp_29">29</span>件
                </div>
                <a href="">立即抢购</a>
            </li> <li>
            <img src="../images/phone_1.png" alt="">
            <p>Apple苹果iPhone 6s Plus(A1699) 32G 金色 移动联通电信4G手机</p>
            <h2>￥6008</h2>
            <h4>￥6998</h4>
            <div>
                已售87%
                <div class="progressbar">
                    <div class="progressbar-s"></div>
                </div>
                剩余<span class="sp_29">29</span>件
            </div>
            <a href="">立即抢购</a>
        </li> <li>
            <img src="../images/phone_1.png" alt="">
            <p>Apple苹果iPhone 6s Plus(A1699) 32G 金色 移动联通电信4G手机</p>
            <h2>￥6008</h2>
            <h4>￥6998</h4>
            <div>
                已售87%
                <div class="progressbar">
                    <div class="progressbar-s"></div>
                </div>
                剩余<span class="sp_29">29</span>件
            </div>
            <a href="">立即抢购</a>
        </li> <li>
            <img src="../images/phone_1.png" alt="">
            <p>Apple苹果iPhone 6s Plus(A1699) 32G 金色 移动联通电信4G手机</p>
            <h2>￥6008</h2>
            <h4>￥6998</h4>
            <div>
                已售87%
                <div class="progressbar">
                    <div class="progressbar-s"></div>
                </div>
                剩余<span class="sp_29">29</span>件
            </div>
            <a href="">立即抢购</a>
        </li> <li>
            <img src="../images/phone_1.png" alt="">
            <p>Apple苹果iPhone 6s Plus(A1699) 32G 金色 移动联通电信4G手机</p>
            <h2>￥6008</h2>
            <h4>￥6998</h4>
            <div>
                已售87%
                <div class="progressbar">
                    <div class="progressbar-s"></div>
                </div>
                剩余<span class="sp_29">29</span>件
            </div>
            <a href="">立即抢购</a>
        </li> <li>
            <img src="../images/phone_1.png" alt="">
            <p>Apple苹果iPhone 6s Plus(A1699) 32G 金色 移动联通电信4G手机</p>
            <h2>￥6008</h2>
            <h4>￥6998</h4>
            <div>
                已售87%
                <div class="progressbar">
                    <div class="progressbar-s"></div>
                </div>
                剩余<span class="sp_29">29</span>件
            </div>
            <a href="">立即抢购</a>
        </li> <li>
            <img src="../images/phone_1.png" alt="">
            <p>Apple苹果iPhone 6s Plus(A1699) 32G 金色 移动联通电信4G手机</p>
            <h2>￥6008</h2>
            <h4>￥6998</h4>
            <div>
                已售87%
                <div class="progressbar">
                    <div class="progressbar-s"></div>
                </div>
                剩余<span class="sp_29">29</span>件
            </div>
            <a href="">立即抢购</a>
        </li>
        </ul>
    </div>
</div>
<!--列表页独有模块结束-->

<!--底部模块开始-->
<footer class="footer">
    <!--版心盒子-->
    <div class="w">
        <div class="mod_service">
            <ul>
                <li>
                    <h5 class="h5_zheng h"></h5>
                    <div class="service_text">
                        <h4>正品保障</h4>
                        <p>正品保障，提供发票</p>
                    </div>
                </li>
                <li>
                    <h5 class="h5_car h"></h5>
                    <div class="service_text">
                        <h4>极速物流</h4>
                        <p>极速物流，极速送达</p>
                    </div>
                </li>
                <li>
                    <h5 class="h5_bao h"></h5>
                    <div class="service_text">
                        <h4>无忧售后</h4>
                        <p>7天无理由退货</p>
                    </div>
                </li>
                <li>
                    <h5 class="h5_te h"></h5>
                    <div class="service_text">
                        <h4>特色服务</h4>
                        <p>私人订制家电套餐</p>
                    </div>
                </li>
                <li>
                    <h5 class="h5_bang h"></h5>
                    <div class="service_text">
                        <h4>帮助中心</h4>
                        <p>您的购物指南</p>
                    </div>
                </li>

            </ul>
        </div>
        <div class="mod_help">
            <dl>
                <dt>服务指南</dt>
                <dd><a href="">购物流程</a></dd>
                <dd><a href="">会员介绍</a></dd>
                <dd><a href="">生活旅行/团购</a></dd>
                <dd><a href="">常见问题</a></dd>
                <dd><a href="">大家电</a></dd>
                <dd><a href="">练习客服</a></dd>

            </dl>
            <dl>
                <dt>服务指南</dt>
                <dd><a href="">购物流程</a></dd>
                <dd><a href="">会员介绍</a></dd>
                <dd><a href="">生活旅行/团购</a></dd>
                <dd><a href="">常见问题</a></dd>
                <dd><a href="">大家电</a></dd>
                <dd><a href="">练习客服</a></dd>

            </dl>
            <dl>
                <dt>服务指南</dt>
                <dd><a href="">购物流程</a></dd>
                <dd><a href="">会员介绍</a></dd>
                <dd><a href="">生活旅行/团购</a></dd>
                <dd><a href="">常见问题</a></dd>
                <dd><a href="">大家电</a></dd>
                <dd><a href="">练习客服</a></dd>

            </dl>
            <dl>
                <dt>服务指南</dt>
                <dd><a href="">购物流程</a></dd>
                <dd><a href="">会员介绍</a></dd>
                <dd><a href="">生活旅行/团购</a></dd>
                <dd><a href="">常见问题</a></dd>
                <dd><a href="">大家电</a></dd>
                <dd><a href="">练习客服</a></dd>

            </dl>
            <dl>
                <dt>服务指南</dt>
                <dd><a href="">购物流程</a></dd>
                <dd><a href="">会员介绍</a></dd>
                <dd><a href="">生活旅行/团购</a></dd>
                <dd><a href="">常见问题</a></dd>
                <dd><a href="">大家电</a></dd>
                <dd><a href="">练习客服</a></dd>

            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd><img src="../images/wx_cz.jpg" alt=""></dd>
                <dd><a href="">品优购客户端</a></dd>
            </dl>
        </div>
    </div>
    <!--页脚制作-->
    <div class="mod_copyright w">
        <div class="link">
            <a href=""> 关于我们  |</a>
            <a href="">联系我们  | </a>
            <a href=""> 联系客服  |  </a>
            <a href=""> 商家入驻  |</a>
            <a href=""> 营销中心  | </a>
            <a href="">手机品优购  |</a>
            <a href=""> 友情链接  | </a>
            <a href="">销售联盟  |</a>
            <a href=""> 品优购社区  |  </a>
            <a href=""> 品优购公益  | </a>
            <a href=""> English Site  |</a>
            <a href=""> Contact U</a>

        </div>
        <div class="copyright">
            地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>
            京ICP备08001421号京公网安备110108007702
        </div>
    </div>
</footer>
<!--底部模块结束-->

</body>
</html>